import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useMediaPredicate } from 'react-media-hook';
import BackButton from 'src/component/BackButton';
import { MediaQuery } from 'src/constant/Media';
// import { loadStatements } from 'src/service/reportService';
import { getUserReport } from 'src/service/moneyService'
import { calibrateBeginDate, calibrateEndDate } from 'src/util/datetimeHelper';
import Interval from './component/Interval';
import ReportWithoutTabs from './component/ReportWithoutTabs';
import ReportWithTabs from './component/ReportWithTabs';
import { useSelector } from 'react-redux';
import { RootState } from 'src/redux/store';
import style from './Report.module.scss';

const Report = () => {
  const isBiggerThanXsm = useMediaPredicate(MediaQuery.Xsm);
  const [begin, setBegin] = useState<string>(calibrateBeginDate(new Date()).toISOString());
  const [end, setEnd] = useState<string>(calibrateEndDate(new Date()).toISOString());
  const { accountInfo } = useSelector((rootState: RootState) => rootState.auth);
  const token = localStorage.getItem("token")

  useEffect(() => {
    if (!accountInfo?.FID) return
    getUserReport({
      FUserID: accountInfo?.FID,
      token: token,
      Sdate: begin,
      Edate: end,
    });
  }, [begin, end, accountInfo]);

  return (
    <div>
      <BackButton />
      <div className={style.head}>报表</div>
      <Interval begin={begin} setBegin={(v) => setBegin(v)} end={end} setEnd={(v) => setEnd(v)} />
      {isBiggerThanXsm ? <ReportWithoutTabs /> : <ReportWithTabs />}
    </div>
  );
};

export default Report;
